<template>
	<view class="content">
		<view class="padding-lr padding-top-sm bg flex" @click.stop="goSearch">
			<u-search placeholder="搜大神" v-model="keyword" shape="square" disabled :show-action="false" :animation="true"
				bg-color="#343546"></u-search>
		</view>
		<scroll-view scroll-x class="bg nav text-white">
			<view class="flex text-center">
				<view class="cu-item flex-sub" v-for="(item,index) in tabData" :key="index" @tap="goNav(item)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>

		<view>
			<!-- 轮播图 -->
			<view class="wrap padding-sm">
				<u-swiper :list="swiperList" @click="goList"></u-swiper>
			</view>
			<view class="" style="color: #BFBFCB;">
				<u-grid :col="5" :border="false">
					<u-grid-item bg-color="#111224" v-for="(item,index) in tabData" @tap="goNav(item)">
						<u-image mode="" width='92' height="92" :src=item.img >
						</u-image>
						<view class="grid-text margin-top-sm">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="bg margin-lr-sm padding-sm radius">
				<view class="flex justify-between text-white padding-bottom-sm">
					<view>随机推荐</view>
					<!-- <view>更多<u-image class="margin-left-sm" style="display: inline-block;" width="14upx" height="24upx"
							src="../../static/images/index/right.png"></u-image>
					</view> -->
				</view>
				<view class="flex justify-between">
					<view v-for="(item,index) in randomGoods" :key="index">
						<view @click="goOrder(item)">
							<view class="u-relative">
								<u-image width="200upx" height="200upx" :src=item.user.avr></u-image>
							</view>
							<view class="margin-top-xs text-white text-df">{{item.description}}</view>
							<view class="margin-top-xs" style="color: #FF711B;">
								<u-image width="20upx" height="20upx" style="display: inline-block;margin-right: 6upx;"
									src="../../static/images/index/jinbi.png"></u-image>
								{{item.money}}币/局
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	export default {
		onShow() {
			let self = this;
			uni.request({
					url: 'http://localhost:8080/category/byordernum',
					success(res) {
						self.tabData = res.data.data
					}
				}),
				uni.request({
					url: 'http://localhost:8080/category/random',
					success(res) {
						self.randomGoods = res.data.data
					}
				})
		},
		data() {
			return {
				keyword: '',
				TabCur: 0,
				tabData: [],
				randomGoods: [],
				scrollLeft: 0,
				swiperList: [{
						image: 'https://wn-project.oss-cn-fuzhou.aliyuncs.com/img-2022090311491708314618.png',
						title: 'ow',
						id:81
					},
					{
						image: 'https://wn-project.oss-cn-fuzhou.aliyuncs.com/img-20220903114519057316.png',
						title: 'wz',
						id:80
					},
					{
						image: 'https://wn-project.oss-cn-fuzhou.aliyuncs.com/img-2022090311470002964176.png',
						title: 'lol',
						id:78
					},
					{
						image: 'https://wn-project.oss-cn-fuzhou.aliyuncs.com/img-2022090311541007002466.png',
						title: 'bn',
						id:82
					},
					{
						image: 'https://wn-project.oss-cn-fuzhou.aliyuncs.com/img-2022090311553004642606.png',
						title: 'fn',
						id:74
					},
				],
				src: '../../static/images/index/image_dijia1.png',
				value1: 1,
				value2: 1,
				value3: 1,
			}
		},
		onLoad() {
			// uni.getStorage({
			// 	key:"user-token",
			// 	success: (res) => {
			// 		// 本地存在user-token
			// 		console.log("获取成功");
			// 	},
			// 	fail:(res)=>{
			// 		console.log(res);
			// 		uni.redirectTo({
			// 			url:"/pages/public/login"
			// 		});
			// 	}
			// });
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			goList(index){
				uni.navigateTo({
					url: '/pages/index/game/gameList?id=' + this.swiperList[index].id
				})
			},
			//获取地址和经纬度
			getPlace() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						// this.address = res.address + res.name
						this.address = res.name
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				})
			},
			// 跳转游戏列表
			goNav(e) {
				uni.navigateTo({
					url: '/pages/index/game/gameList?id=' + e.id
				})
			},
			// 跳转搜索
			goSearch() {
				uni.navigateTo({
					url: '/pages/index/search/index'
				});
			},
			// 跳转订单
			goOrder(e) {
				uni.navigateTo({
					url: '/pages/index/game/order?id='+e.id
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #111224;
	}

	.bg {
		background-color: #1E1F31;
	}
</style>
